<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>2.分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前页面求和为: {{sum}}</h2>
        <button @click="add" id="btn">点我+1</button>
        <button @click="death">销毁</button>
    </div>

    <script>
        //Vue的全局配置 Vue.config
        //关闭生产提示
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                sum: 0
            },
            methods: {
                add(){
                    console.log('您点击了+按钮');
                    this.sum += 1
                },
                death(){
                   this.$destroy() 
                }
            },
            //vue实例初始化前
            beforeCreate() {
                console.log('--beforeCreate--');
                //Vue初始化前(此时还没能访问到Vue实例中的data和methods)
                //
                //console.log(this.sum); //undefined
                // debugger
            },
            //Vue实例初始化完成
            created() {
                console.log('--created--');
                // console.log(this.sum);
                // console.log(this.add);
            },
            // Vue实例更新真实DOM之前
            beforeMount() {
                console.log('--beforeMount--');
                // const btn = document.getElementById('btn') 
                // btn.innerText = '哈哈'

            },
            //Vue实例更新完真实DOM
            mounted() {
                console.log('--mounted--');
                //const btn = document.getElementById('btn')
                // console.log(btn);

            },
            //vue实例将要更新页面
            beforeUpdate() {
                //数据是最新的 但是页面尚未更新
                console.log('--beforeUpdate--');
                // console.log(this.sum);

            },
            //vue实例完成更新页面
            updated() {
                console.log('--updated--');
                // console.log(this.sum);
                // debugger;
            },
            //vue 实例销毁前
            beforeDestroy() {
                console.log('--beforeDestroy--');
            },
            //vue实例销毁完毕
            destroyed() {
                console.log('--destroyed--');
            }
        })
    </script>
</body>
</html>